<template>
    <a-spin :spinning="initing">
        <a-tabs type="card">
            <a-tab-pane v-for="item in category" :key="item.code">
                <template #tab>
                    <a-space :size="5">
                        <a-image v-if="item.icon" :preview="false" :width="20" :src="imageUrl + item.icon"></a-image>
                        <div>{{ item.name }}</div>
                    </a-space>
                </template>
                <Page :category="item" />
            </a-tab-pane>
        </a-tabs>
    </a-spin>
</template>

<style lang="scss" module>
    .top{
        display: flex;
        align-items: center;
        .name{
            font-size: 28px;
            font-weight: bold;
        }
    }
</style>

<script lang="ts" setup>
import { ref } from 'vue';
import { categoryApi } from '@/api/Bianli';
import Page from './page/index.vue'

const imageUrl = import.meta.env.B_NET_STATIC_URL
    const initing = ref(true)
    const category = ref<any[]>([])


    categoryApi().then(data => {
        if(data) {
            category.value = data
        }

        initing.value = false
    })
</script>